<template>
  <div>
    <div class="header">
      <span
        >搜索用户数
        <svg
          t="1666622728815"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2668"
          width="16"
          height="16"
        >
          <path
            d="M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0z m0 896A384 384 0 0 1 512 128a384 384 0 0 1 0 768z m29.696-194.88c-11.136 10.112-24.96 17.344-31.488 15.36-6.08-1.792-9.536-7.424-8.384-13.056l89.344-248c7.424-31.488-12.736-60.16-55.424-63.872-44.8 0-110.976 40.128-151.232 90.944 0 6.08-1.344 21.12 0.128 30.208l53.632-54.208c11.008-10.176 23.808-17.344 30.336-15.424 6.592 1.92 10.112 8.384 8 14.464l-88.704 246.848c-10.176 28.864 9.152 57.152 56.192 63.616 68.928 0 109.888-39.168 150.208-89.984 0-6.08 2.368-22.08 0.96-31.104l-53.568 54.208zM575.744 192c-35.584 0-64.448 25.728-64.448 63.808 0 37.952 28.864 63.744 64.448 63.744 35.648 0 64.448-25.728 64.448-63.744 0-38.08-28.8-63.808-64.448-63.808z"
            p-id="2669"
            fill="#bfbfbf"
          ></path></svg
      ></span>
    </div>
    <div class="main">
      <span class="main-title">12321 </span>
      <span
        >17.1
        <svg
          style="display: none"
          t="1666591546370"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="9290"
          width="16"
          height="16"
        >
          <path
            d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
            p-id="9291"
            fill="#d81e06"
          ></path>
        </svg>
        <svg
          t="1666591675650"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="10374"
          width="16"
          height="16"
        >
          <path
            d="M64 320l448 448 448-448z"
            fill="#1afa29"
            p-id="10375"
          ></path></svg
      ></span>
    </div>
    <div class="footer">
      <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "lineChart",
  mounted() {
    // 初始化echarts实例
    let lineChart = echarts.init(this.$refs.charts);
    lineChart.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [10, 39, 33, 47, 16, 44, 18, 9],
          //   拐点的样式
          itemStyle: {
            opacity: 0,
          },
          // 线条的样式
          lineStyle: {
            color: "blue",
          },
          // 曲线展示
          smooth: true,
          // 填充色设置
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 0.7,
              colorStops: [
                {
                  offset: 0,
                  color: "blue", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });

    let timer = null;
    window.addEventListener("resize", () => {
      clearInterval(timer);
      timer = setTimeout(() => {
        lineChart.resize();
      }, 50);
    });
  },
};
</script>

<style scoped>
.header .icon {
  vertical-align: top;
  margin-left: 20px;
}
.main {
  margin: 15px 0;
}
.main .main-title {
  margin-right: 30px;
}
.main .icon {
  margin-left: 10px;
}
.charts {
  width: 100%;
  height: 50px;
}
</style>
